<script setup>
// 引入 解析路由 更新导航守卫
import { useRoute, onBeforeRouteUpdate } from 'vue-router'
import { DrawRect, DrawLine, DrawPolygon, DrawCircle } from '@antv/l7-draw'
import { inject, watch, onBeforeUnmount } from 'vue'

const { scene } = inject('mapScene')

// 进入路由时，读取当前组件路由参数 设置绘制类型
let drawType
const route = useRoute()
drawType = route.params.type
// 切换路由时，读取路由参数变化，更新绘制类型
onBeforeRouteUpdate((to, from) => {
  drawType = to.params.type
  initDrawInstance(scene.value)
})

// 绘制实例
let drawInstance

// 实例化绘制实例函数
function initDrawInstance(scene) {
  if (drawInstance) {
    drawInstance.clear()
    drawInstance.destroy()
    drawInstance = null
  }
  switch (drawType) {
    case 'line':
      drawInstance = new DrawLine(scene, {
        distanceOptions: {},
      })
      break
    case 'rect':
      drawInstance = new DrawRect(scene, {
        areaOptions: {},
      })
      break
    case 'polygon':
      drawInstance = new DrawPolygon(scene, {
        areaOptions: {},
      })
      break
    case 'circle':
      drawInstance = new DrawCircle(scene, {
        areaOptions: {},
      })
      break
  }
  drawInstance.enable()
}

// 确保场景加载完成后，再进行绘制
watch(scene, (newScene) => {
  if (!newScene) return
  initDrawInstance(newScene)
})

onBeforeUnmount(() => {
  if (drawInstance) {
    drawInstance.clear()
    drawInstance.destroy()
    drawInstance = null
  }
})
</script>

<template>
  <div>测量功能</div>
</template>

<style scoped></style>
